<!--
 * @Author: zhang_rui_1 17805271997@163.com
 * @Date: 2023-07-12 16:44:54
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2024-01-03 11:10:43
 * @FilePath: \vue3-ts\src\views\bus\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E5%BD%AE
-->
<template>
  <div class="box">
    <box-top />
    <div class="box-main">
      <div class="box-main-left">
        <h6>车辆在线情况</h6>
        <div class="box-main-left-top">
          
        </div>
        <h6>历史事件类型</h6>
        <div class="box-main-left-center">
          
        </div>
        <h6>安全事件列表</h6>
        <div class="box-main-left-bottom">
         
        </div>
      </div>
      <div class="box-main-center">
        <div class="box-main-center-top">
         
        </div>
        <center-bottom />
      </div>
      <div class="box-main-right">
        <h6>车辆详情</h6>
        <div class="box-main-right-top">
          
        </div>
        <h6>车辆类型分布</h6>

        <div class="box-main-right-center">
         
        </div>
        <h6>实时监控</h6>
        <div class="box-main-right-bottom">
          
        </div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>
    <script  lang="ts">
import { toRefs, reactive, defineComponent } from "vue";
import boxTop from "../components/boxTop/index.vue";
import centerBottom from "../components/centerBottom/index.vue";

export default defineComponent({
  name: "securityAlarm",
  components: {
    centerBottom,
    boxTop,
  },
  setup() {
    const state = reactive({
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>
    <style scoped lang="less">
.box {
  background: url(../../../assets/images/bus/box-bg.png) no-repeat;
  background-size: cover;
  &-main {
    height: calc(100% - 6%);
    display: flex;
    background: url(../../../assets/images/bus/footerLine.png) no-repeat;
    background-size: 100% auto;
    background-position: bottom left;
    h6 {
      height: 2.8rem;
    line-height: 2.8rem;
      padding: 0;
      margin: 0;
      font-size: 0.9rem;
      color: white;
      padding-left: 1.6rem;
      background: url(../../../assets/images/bus/title_box.png) no-repeat;
      background-size: 100%;
      background-position: center left;
      position: relative;
      left: 0;
      padding-left: 2rem;
    }
    &-left {
      width: 25%;
      height: 100%;
      > div {
        box-sizing: border-box;
        padding-left: 1rem;
      }
      &-top {
        width: 100%;
        color: #9aabbe;
        height: calc(33% - 7%);
      }
      &-center {
        width: 100%;
        height: calc(34% - 7%);
        /deep/ .inside-column {
          height: 0.3rem;
          background: linear-gradient(to right, #1654e4, #f0ffff);
        }
        /deep/ .ranking-column {
          margin-top: 0.625rem;
          border-bottom: none;
        }
        /deep/ .rank {
          display: none;
        }
      }
      &-bottom {
        width: 100%;
        height: calc(30% - 7%);
        /deep/ .dv-scroll-board .rows .row-item {
          background: rgba(32, 57, 87, 0.5) !important;
        }
        /deep/ .dv-scroll-board .rows .row-item .ceil {
          border: 1px solid rgb(6, 20, 54);
          text-align: center;
        }
        /deep/ .dv-scroll-board .rows .row-item .ceil:nth-child(4) {
          color: red;
        }
        /deep/ .dv-scroll-board .header {
          background: rgba(32, 57, 87, 0.5) !important;
        }
        /deep/ .dv-scroll-board .rows .row-item span {
          background: transparent !important;
        }
      }
    }
    &-center {
      width: 50%;
      height: 100%;
      padding: 0.8rem;
      box-sizing: border-box;
      &-top {
        height: 85%;
        padding-bottom: 7%;
        box-sizing: border-box;
      }
      &-bottom {
        height: 15%;
      }
    }
    &-right {
      width: 25%;
      height: 100%;
      &-top {
        width: 100%;
        height: calc(33% - 7%);
        /deep/ .dv-scroll-board .rows .row-item {
          text-align: center;
          background: linear-gradient(to top, #112e4e, #162438);
        }
        /deep/ .dv-scroll-board .rows .row-item .ceil:nth-child(3),
        /deep/ .dv-scroll-board .rows .row-item .ceil:nth-child(5) {
          font-weight: bold;
        }
      }
      &-center {
        width: 100%;
        height: calc(34% - 7%);
        display: flex;
        &-left {
          width: 30%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          .dv-decoration-9 {
            position: absolute;
            width: 8rem;
            height: 8rem;
            color: white;
            font-weight: bold;
            font-size: 1.3rem;
          }
        }
        &-right {
          flex: 1;
          color: white;
          margin-top: 10%;
          dl {
            display: inline-block;
            text-align: center;
            width: 33%;
            font-size: 1.2rem;
            dt {
              display: flex;
              align-items: center;
              justify-content: center;
              span {
                font-size: 1rem;
              }
            }
            dd {
              margin: 0;
              color: #ccc;
              font-size: 0.875rem;
            }
          }
        }
      }
      &-bottom {
        width: 100%;
        height: calc(33% - 7%);
        padding-left: 1rem;
        /deep/ .dv-scroll-ranking-board .ranking-info .rank {
          width: 60px;
          padding-right: 0.3rem;
        }
        /deep/ .inside-column {
          height: 0.3rem;
          background: linear-gradient(to right, #1654e4, #f0ffff);
        }
        /deep/ .ranking-column {
          margin-top: 0.625rem;
          border-bottom: none;
        }
      }
    }
  }
}
</style>